<template>
  <page-body>
    <view class="page">
      <!---flex布局flex布局开始-->
      <view class="flex benben-flex-layout flex-wrap align-center">
        <view class='flex flex-direction flex-wrap align-center self-center justify-center flex-sub avatarName_fd0_0'>
          <benben-image-upload :path.sync="user.avatar" :img-id.sync="user.avatar" :is-cropping="false"
            :is-show-clean="true" class="upload position-relative">
            <text v-if="user.avatar != ''" data-type="clean"
              class='fu-iconfont2 position-absolute avatarName_fd0_0_c0_icon'>&#xE8E7;</text>
            <image class=" avatarName_fd0_0_c0_image" mode="aspectFit"
              :src="user.avatar ? user.avatar : STATIC_URL+'19.png'"></image>
          </benben-image-upload>
          <text class='avatarName_fd0_0_c1'>点击上传头像</text>
          <view class='flex flex-wrap align-center avatarName_fd0_0_c2'>
            <view class='flex flex-wrap align-center avatarName_fd0_0_c2_c0'>
              <text>昵称</text>

              <view class='flex  avatarName_fd0_0_c2_c0_c1'></view>

            </view>
            <benben-input class='avatarName_fd0_0_c2_c1' type="text" :placeholder="`请输入`" confirm-type="done"
              :maxlength="20" :adjust-position='true' v-model="user.nickname"
              placeholder-style="color:#999;font-size:28rpx" />
          </view>
          <view class='flex flex-wrap align-center justify-between avatarName_fd0_0_c3'>
            <button class='avatarName_fd0_0_c3_c0' @tap.stop="handleJumpDiy" data-type="switchTab"
              :data-url="`/pages/tabBar/home/home`">上一步</button>
            <button class='avatarName_fd0_0_c3_c1' @tap.stop="submit" data-type="switchTab"
              :data-url="`/pages/tabBar/home/home`">完成</button>
          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->


    </view>
  </page-body>
</template>
<script>
  export default {
    components: {},


    data() {
      return {
        user: {
          avatar: '',
          nickname: ''
        },
        "fd0_0_c0": "",
        "fd0_0_c0id": ""
      };
    },
    computed: {

    },
    watch: {},
    onLoad(options) {

    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {

    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      submit() {
        if (!this.user.avatar) {
          this.$message.info('请上传头像')
          return
        }
        if (!this.user.nickname) {
          this.$message.info('请输入昵称')
          return
        }
        this.$api.dbPost(global.apiUrls.post5cb54af125f1c, {
          avatar: this.user.avatar,
          nickname: this.user.nickname,
        }).then(res => {
          if (res.data.code == 1) {
            uni.switchTab({
              url: `/pages/tabBar/home/home`
            })
          } else {
            this.$message.info(res.data.msg)
          }
        })
      },
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: url(image-path('146.png')) no-repeat;
    background-size: 100% 100%;
  }

  .avatarName_fd0_0_c3_c1 {
    background: #5ECA71;
    border-radius: 36rpx 36rpx 36rpx 36rpx;
    width: 246rpx;
    line-height: 72rpx;
    font-size: 28rpx;
    color: #fff;
    height: 72rpx;
  }

  .avatarName_fd0_0_c3_c0 {
    background: #FFCD51;
    border-radius: 36rpx 36rpx 36rpx 36rpx;
    width: 246rpx;
    line-height: 72rpx;
    font-size: 28rpx;
    color: #fff;
    height: 72rpx;
  }

  .avatarName_fd0_0_c3 {
    width: 550rpx;
    margin: 240rpx 0rpx 0rpx 0rpx;
  }

  .avatarName_fd0_0_c2_c1 {
    width: 300rpx;
  }

  .avatarName_fd0_0_c2_c0_c1 {
    background: #85ce61;
    width: 1rpx;
    height: 30rpx;
    margin: 0rpx 10rpx 0rpx 10rpx;
    transform: scaleX(0.5);
  }

  .avatarName_fd0_0_c2_c0 {
    color: rgba(119, 119, 119, 1);
  }

  .avatarName_fd0_0_c2 {
    background: var(--benbenbgColor1);
    background-size: 100% auto;
    border-radius: 44rpx;
    width: 490rpx;
    height: 88rpx;
    line-height: 88rpx;
    padding: 0rpx 24rpx 0rpx 24rpx;
  }

  .avatarName_fd0_0_c1 {
    color: var(--benbenFontColor7);
    margin: 24rpx 0rpx 100rpx 0rpx;
  }

  .avatarName_fd0_0_c0_image {
    width: 180rpx;
    height: 180rpx;
    border-radius: 16rpx;
  }

  .avatarName_fd0_0_c0_icon {
    top: 0rpx;
    right: 0rpx;
    z-index: 10;
    color: #ff5536;
  }

  .avatarName_fd0_0 {
    margin: 300rpx 0rpx 0rpx 0rpx;
  }
</style>
